<template>
	<div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="id"
     >
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      >
    </el-table-column>
    <el-table-column
      label="头像"
      >
	   <template slot-scope="scope">
		  <img :src="scope.row.imgpath" style="width:100px;height:6.25rem;border-radius: 50%;">
		  </img>
	  </template>
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      >
    </el-table-column>
    <el-table-column  label="状态">
      <template slot-scope="scope">
       {{scope.row.status}}
	   <el-switch
	       v-model="scope.row.status"
	       active-color="#13ce66"
	       inactive-color="#ff4949"
	       :active-value="1"
	       :inactive-value="2">
	     </el-switch>
      </template> 
    </el-table-column>
    <el-table-column
      prop="rid"
      label="部门编号"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small" @click="edituser(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>
		 <!--表单里面的内容 id   name-->
		        <el-form ref="form" :model="form" label-width="80px">
		            <el-form-item label="id">
		              <el-input v-model="form.id"  readonly></el-input>
		            
		            </el-form-item>
		           <el-form-item label="名字">
		              <el-input v-model="form.username"></el-input>
		            </el-form-item>
		          <el-form-item label="性别">
		              <el-switch
		                  v-model="form.sex"
		                  active-color="#13ce66"
		                  inactive-color="#ff4949"
		                  active-value="男"
		                  inactive-value="女">
		                </el-switch>
		          </el-form-item>
				  <el-form-item label="部门编号">
				     <template>
				       <el-select v-model="form.rid" placeholder="请选择">
				         <el-option
				           v-for="item in options"
				           :key="item.value"
				           :label="item.label"
				           :value="item.value">
				         </el-option>
				       </el-select>
				     </template>
				  </el-form-item>
		          <el-form-item>
		            <el-button type="primary" @click="onSubmit">保存</el-button>
		            <el-button>取消</el-button>
		          </el-form-item>
		        </el-form>
		
		
		
		
	</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
	  edituser(row){
		  // 将用户的信息填充到框里面
		  this.dialogVisible=true;
		  this.form=row;
		  
	  }
    },

    data() {
      return {
        tableData: [],
		dialogVisible:false,
		options: [{
		          value: 1,
		          label: '管理员'
		        }, {
		          value: 2,
		          label: '员工'
		        }, {
		          value: 3,
		          label: '测试'
		        }],
		form:{}
		
      }
    }
	,created(){
		// //{
  //           "id": 1,
  //           "username": "admin",
  //           "password": "123456",
  //           "imgpath": "https://chengchenchen.oss-cn-beijing.aliyuncs.com/1666799027714.jpg",
  //           "sex": "男",
  //           "rid": 1,
  //           "createtime": "2022-10-26T23:43:56",
  //           "updatetime": "2022-11-07T20:11:48",
  //           "status": 1
  //       }
		// 获取所有得到用户的数据然后赋值给tableData
		this.$axios.get("t-user/queryAll").then(r=>{
			console.log(r);
			this.tableData=r.data.t;
		})
	}
  }
</script>